<template>
  <div class="manage_contest_box">
    <div class="editOrAddContest">
      <a-card>
        <a-form
          style=" margin: 10px auto"
          label-align="left"
          auto-label-width
          :model="contest"
          @submit="addOrUpdateContest"
          size="large"
        >
          <a-row :gutter="15">
            <a-col :span="12">
              <a-form-item field="id" label="比赛id">
                <a-input v-model="contest.id" disabled/>
              </a-form-item>
              <a-form-item field="title" label="比赛开始标题">
                <a-input v-model="contest.title" placeholder="请输入比赛标题" />
              </a-form-item>
              <a-form-item field="starttime" label="比赛开始时间" tooltip="格式参考: YYYY-MM-DD HH:mm:ss" >
                <a-input v-model="contest.starttime" placeholder="请输入比赛开始时间"/>
              </a-form-item>
              <a-form-item field="contestnum" label="比赛时间 (小时)">
                <a-input-number v-model="contest.contestnum" placeholder="请输入比赛时间" />
              </a-form-item>
              <a-form-item>
                <a-button
                  type="primary" html-type="submit" style="width: 100%" >添加或修改
                </a-button>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="tids" label="题号列表" tooltip="请输入题号，按下回车。题号数量要和对应分数数量一致">
                <a-input-tag v-model="contest.tids" placeholder="请输入题号，按下回车" />
              </a-form-item>
              <a-form-item field="tscores" label="分数列表" tooltip="请输入分数，按下回车。题号数量要和对应分数数量一致">
                <a-input-tag v-model="contest.tscores" placeholder="请输入分数，按下回车" />
              </a-form-item>
              <a-form-item field="content" label="竞赛描述" tooltip="请输入竞赛描述">
                <a-input v-model="contest.content" placeholder="请输入竞赛描述" />
              </a-form-item>
              <a-button @click="contest.id = 0"> 清除id </a-button>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </div>
    <a-card class="contest_item"
            v-for="contestItem in contestList"
            :key="contestItem.id"
            :title="contestItem.title"
            >
      <template #extra>
        <a-button type="primary" @click="toManageContest(contestItem)" :disabled="contestItem.status">
          管理竞赛
        </a-button>
        <a-button @click="delContest(contestItem.id)">删除</a-button>
      </template>
      <a-list>
        <a-list-item>
          内容: {{ contestItem.content }}
        </a-list-item>
        <a-list-item>
          开始时间： {{ contestItem.starttime }}
        </a-list-item>
        <a-list-item>
          时长： {{ contestItem.contestnum }}
          <a-link type="primary">
            {{ !contestItem.status? '还未开始' : contestItem.status == 1? '正在进行' : '已经结束'}} >>
          </a-link>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ContestControllerService } from "../../generated/services/ContestControllerService";
import { Message } from "@arco-design/web-vue";
import { useStore } from "vuex";
import {compareTime} from '../util/utils';

const userid = ref(null);
const store = useStore();
const router = useRouter();
const contest = ref({
  title: "test"
});
const contestList = ref([{
  id: 1,
  title: "ttt",
  content: "content",
  time: "2024-10-06"
}]);

const toManageContest = (scorde) => {
  console.log('scorde', scorde);
  // 为表单赋值
  contest.value = scorde;
};
/*content:
  contestnum?: number;
starttime?: string;
tids?: Array<number>;
title?: string;
tscores?: Array<number>;
userid?: number;*/
const addOrUpdateContest = async () => {
  console.log('addOrUpdateContest', contest.value);
  let {content, contestnum, starttime, tids, title, tscores} = contest.value;
  if (!contestnum || !starttime || !tids || !title || !tscores) {
    Message.error("填写的参数错误!");
    return;
  }
  if (tids.length != tscores.length) {
    Message.error("填写的题号数量和分数数量不一致错误!");
    return;
  }
  if (contest.value?.id) {
    // 修改
    let res = await ContestControllerService.addContestUsingPost({...contest.value
      , userid: userid.value});
    if (res.code == 0) {
      Message.success("修改成功！");
    }else {
      Message.error("修改失败！");
    }
  }else {
    // 添加
    let res = await ContestControllerService.addContestUsingPost({...contest.value
      , userid: userid.value});
    if (res.code == 0) {
      Message.success("增加成功！");
    }else {
      Message.error("增加失败！");
    }
  }
  //清空表格数据
  contest.value = {};
};
// 删除竞赛
const delContest = async (id) => {
  // 判断竞赛是否已经开始或结束
  // return;
  let res = await ContestControllerService.deleteContestUsingPost({id});
  if (res.code == 0) {
    // 查询加载竞赛信息
    reloadAllContest();
    Message.success("删除成功");
  }else {
    Message.error("删除失败");
  }
}

onMounted(async () => {
  userid.value = store.state.user?.curUser?.id;
  // 查询所有竞赛
  reloadAllContest();
})
const reloadAllContest = async () => {
  let res = await ContestControllerService.listContestUsingPost();
  console.log('res.data', res.data);
  if (res.code == 0) {
    contestList.value = res.data;
    // 当前时间
    let curTime = new Date();
    // 给所有竞赛计算一个状态
    for (let i = 0; i < res.data.length; i++) {
      let item = res.data[i];
      // 1表示还没开始 0 表示开始了
      item.status = compareTime(item.starttime, curTime, item.contestnum);
    }
  }else{
    Message.error(res.message);
  }
}

</script>

<style scoped>
.manage_contest_box {
  min-height: 700px;
}

.contest_item {
  display: inline-block;
  width: 334px;
  //height: 20vh;
}
</style>